<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <style>
        /* 添加的样式 */
        body {
            padding-top: 70px; /* 增加顶部填充以改善间距 */
        }

        .navbar-brand {
            font-weight: bold;
        }

        .navbar-text {
            margin-right: 15px;
        }

        .navbar-nav > li > a {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .page-container {
            padding: 20px;
            display: flex;
            justify-content: center;
        }

        .panel-heading {
            background-color: #f5f5f5;
            border-color: #ddd;
            color: #333;
            padding: 10px 15px;
        }

        .panel-body {
            width: 100%; /* 使面板内容宽度为100% */
            overflow-x: auto; /* 如果需要，添加水平滚动 */
        }

        .table {
            width: 100%; /* 使表格宽度为100% */
        }

        .pagination {
            margin-top: 20px; /* 在分页上方添加一些空间 */
            justify-content: center; /* 将分页居中对齐 */
        }

        .pagination > li > a {
            border-radius: 20px; /* 圆角化分页链接 */
        }
    </style>
    <script type="text/javascript" src="../../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.js"></script>
    <script type="text/javascript" src="../../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../../js/axios-0.21.0.js"></script>
    <script type="text/javascript" src="../../js/qs-6.9.4.js"></script>
</head>

<body>
<div id="app">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <span class="navbar-brand">在线珠宝商城</span>
            </div>
            <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
            <ul v-if="user === null" class="nav navbar-nav">
                <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                <li class="divider"></li>
                <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
            </ul>
            <ul class="nav navbar-nav" v-if="user !== null">
                <li><a href="#" @click.prevent="logout" class="navbar-link"><span
                        class="text-primary">退出登录</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="cart/cart.html">
                        <svg height="15" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489 489"
                             style="enable-background:new 0 0 489 489;" xml:space="preserve">

                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="page-container">
        <div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>订单</h4>
                    <div class="row">
                        <div class="col-md-4">
                            <!-- 搜索收货人名称的输入框 -->
                            <input type="text" placeholder="搜索收货人名称" class="form-control"
                                   v-model="order.userName">
                        </div>
                        <div class="col-md-2">
                            <!-- 搜索收货人名称的按钮 -->
                            <button type="submit" @click="showOrders(1)" class="btn btn-danger"><span
                                    class="glyphicon glyphicon-search"></span></button>
                        </div>
                    </div>
                </div>

                <div class="panel-body" style="width: 1330px">
                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>金额</th>
                            <th>订单状态</th>
                            <th>收件人</th>
                            <th>收货地址</th>
                            <th>创建日期</th>
                            <th colspan="3" style="text-align: center">操作</th>
                            <th colspan="2" style="text-align: center">售后</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="order in orders.records">
                            <td>{{order.orderId}}</td>
                            <td>{{order.totalMoney}}</td>
                            <td>{{order.status}}</td>
                            <td>{{order.userName}}</td>
                            <td>{{order.city}}-{{order.district}}-{{order.address}}</td>
                            <td>{{order.createDate}}</td>
                            <td v-if="!user.role == 1">
                                <button class="btn btn-info" @click="updateOrderStatus(order.orderId,'待收货')">发货
                                </button>
                            </td>
                            <td v-if="user.role == 1">
                                <button v-if="order.status === '待收货'" class="btn btn-info" @click="updateOrderStatus(order.orderId,'待评价')">确认收货</button>
                            </td>
                            <td>
                                <button v-if="user.role == 1 && order.status === '待评价'" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" :data-whatever="order.orderId">评价</button>
                                <button v-if="order.status === '已完成'" type="button" class="btn btn-primary" @click="showComment(order.orderId)">
                                    查看评价
                                </button>
                            </td>
                            <td>
                                <a :href="'detail.html?orderId=' + order.orderId + '&totalMoney=' + order.totalMoney + '&status=' + order.status"
                                   class="btn btn-info">订单详细信息</a>
                            </td>
                            <td>
                                <a @click.prevent="deleteOrder(order.orderId)" class="btn btn-info">删除订单</a>
                            </td>
                            <td>
                                <button class="btn btn-info" @click.prevent="backOrder(order.orderId)">退货</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <ul class="pagination">
                        <li><a href="" @click.prevent="showOrders(order.pageNum-1)"><span>&laquo;</span></a></li>
                        <li><a href="" v-if="flag1" @click.prevent="showOrders(order.pageNum-1)">{{order.pageNum-1}}</a>
                        </li>
                        <li><a href="" @click.prevent="showOrders(pageNum)">{{order.pageNum}}</a></li>
                        <li><a href="" v-if="flag2" @click.prevent="showOrders(order.pageNum+1)">{{order.pageNum+1}}</a>
                        </li>
                        <li><a href="" @click.prevent="showOrders(order.pageNum+1)"><span>&raquo;</span></a></li>
                    </ul>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">查看评价</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="message-text" class="col-form-label">评价:</label>
                            <textarea class="form-control" id="message-text" v-model="comment"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="saveComment(orderId)">评价</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    console.log(document.body.scrollHeight);
    $(function () {
        $(".collapse").on('shown.bs.collapse', function () {
            console.log("shown");
            console.log(document.body.scrollHeight);
            $(parent.document).find("#content").prop("height", document.body.scrollHeight);
        })

        $(".collapse").on("hidden.bs.collapse", function () {
            console.log("hidden");
            console.log(document.body.scrollHeight);
            $(parent.document).find("#content").prop("height", document.body.scrollHeight);
        })

        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            vm.orderId = button.data('whatever')
            var modal = $(this)
            modal.find('.modal-title').text('评价')
        })
    })

    let vm = new Vue({
        el: "#app",
        data: {
            user: null,
            orders: [],
            order: {
                orderId: "",
                userName: "",
                pageNum: ""
            },
            flag1: true,
            flag2: true,
            pages: "9999",
            orderId: "",
            comment: ""
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                axios.get('/user/user').then(res => {
                    if (res.data.message != "success") {
                        alert("请先登录！");
                        location.href = '../../login.html';
                    } else {
                        this.user = res.data.user;
                        this.showOrders(1);
                    }
                });
            },
            showOrders(pageNum) {
                if (pageNum <= this.pages && pageNum >= 1) {
                    this.flag1 = pageNum != 1;
                    this.flag2 = pageNum != this.pages;
                    this.order.pageNum = pageNum;
                }
                let data = Qs.stringify(this.order);
                axios.get("/order/select?" + data)
                    .then(resp => {
                        this.orders = resp.data.orders;
                        this.pages = this.orders.pages;
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            deleteOrder(orderId) {
                axios.delete("/order/delete/" + orderId)
                    .then(resp => {
                        resp.data.message == "success" ? alert("删除成功") : alert("删除失败");
                        this.showOrders(this.order.pageNum);
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            backOrder(orderId) {
                axios.delete("/order/delete/" + orderId)
                    .then(resp => {
                        resp.data.message == "success" ? alert("退货成功") : alert("退货失败");
                        this.showOrders(this.order.pageNum);
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            logout() {
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
            updateOrderStatus(orderId, status) {
                axios.put("/order/update/" + orderId + "/" + status)
                    .then(resp => {
                        if (resp.data.message == "success") {
                            this.showOrders(this.order.pageNum);
                        } else if (resp.data.message == "Shipped") {
                            alert("该订单已发货！");
                        } else if (resp.data.message == "Unpaid") {
                            alert("该订单未支付！");
                        } else if (resp.data.message == "Not-arrived") {
                            alert("该订单未未到达")
                        } else if (resp.data.message == "Received-goods") {
                            alert("该订单已收货！");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            saveComment(orderId) {
                axios.get("/comm/saveComment/" + orderId + "/" + this.comment)
                    .then(resp => {
                        resp.data == "success" ? alert("评价成功") : alert("评价失败");
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            showComment(orderId){
                axios.get("/comm/byOrderId/" + orderId)
                    .then(resp => {
                        // this.comment = resp.data.comment;
                        alert(resp.data);
                    })
                    .catch(error => {
                        console.log(error);
                    })
            }
        }
    })
</script>
</body>
</html>